<template>
	<view class="container">
		<!-- 顶部标题区域 -->
		<view class="header">
			<view class="logo">
				<text class="logo-text">✓</text>
			</view>
			<text class="title">扫码签到</text>
			<text class="subtitle">请授权获取手机号完成签到</text>
		</view>

		<!-- 签到状态卡片 -->
		<view class="status-card">
			<view class="status-title">
				<view class="status-icon">!</view>
				<text>签到说明</text>
			</view>
			<view class="status-content">
				<text>1. 点击下方按钮授权获取手机号</text>
				<!-- <text>2. 系统将自动完成签到\n</text>
        <text>3. 签到成功后您将收到提示</text> -->
			</view>
		</view>

		<!-- 签到按钮 -->
		<button class="sign-btn" :disabled="loading" :loading="loading" open-type="getPhoneNumber"
			@getphonenumber="getPhoneNumber">
			<text v-if="!loading">授权手机号并签到</text>
			<text v-else>正在获取手机号...</text>
		</button>

		<!-- 隐私提示 -->
		<view class="privacy-tip">
			<text>我们承诺保护您的隐私，仅用于签到验证</text>
		</view>

		<!-- 签到结果 -->
		<view class="result-section" :class="resultClass" v-if="showResult">
			<text class="result-title">{{ resultTitle }}</text>
			<text class="result-content">{{ resultContent }}</text>
		</view>

		<!-- 签到成功后的用户信息 -->
		<view class="user-info" v-if="signSuccess">
			<view class="info-item">
				<text class="info-label">签到时间：</text>
				<text class="info-value">{{ signTime }}</text>
			</view>
			<view class="info-item" v-if="userPhone">
				<text class="info-label">手机号码：</text>
				<text class="info-value">{{ userPhone }}</text>
			</view>
			<view class="info-item">
				<text class="info-label">签到状态：</text>
				<text class="info-value status-success">✓ 已签到</text>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				loading: false,
				showResult: false,
				signSuccess: false,
				resultTitle: '',
				resultContent: '',
				resultClass: '',
				userPhone: '',
				signTime: ''
			}
		},
		methods: {
			// 获取用户手机号
			async getPhoneNumber(e) {
				console.log('获取手机号事件:', e)

				// if (e.detail.errMsg === 'getPhoneNumber:fail user deny') {
				// 	// 用户拒绝授权
				// 	this.showResultMessage('授权失败', '您已拒绝授权手机号，无法完成签到', 'error')
				// 	return
				// }

				// // 用户同意授权
				// this.loading = true

				// let encryptedData = e.detail.encryptedData;
				// let iv = e.detail.iv;
				// let code = e.detail.code

				// uni.request({
				// 	url:"https://api.weixin.qq.com/wxa/business/getuserphonenumber?access_token=ACCESS_TOKEN",
				// 	data:{
				// 		code:code
				// 	},
				// 	success:res=>{

				// 	}
				// })
				await uni.request({
					url: 'https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential',
					data: {
						appid: 'wx241784da959b8a9a',
						secret: 'df0362a58fd8b09c9f0ec49cbac3c91e'
					},
					success: res => {
						console.log(res)
						if(res.statusCode == 200){
							let encryptedData = e.detail.encryptedData;
							let iv = e.detail.iv;
							let code = e.detail.code
							
							uni.request({
								url: "https://api.weixin.qq.com/wxa/business/getuserphonenumber?access_token=" + res.data.access_token,
								data: {
									code: code
								},
								method:'POST',
								success: result => {
									console.log(result)
									if(result.statusCode == 200){
										this.signSuccess = 'success'
										this.userPhone = result.data.phone_info.phoneNumber
										this.signTime = this.$formatTime(new Date())
										this.$cloudOBjAjax('customer-mini-sign', 'add', {
											phone: result.data.phone_info.phoneNumber,
											schedule_time: this.$formatYear(new Date())
										})
									}else{
										return this.$simpleToast(result.errMsg)
									}
									
								},
								fail:()=>{
									return this.$simpleToast('出错了,请重新扫码')
								}
							})
						}else{
							return this.$simpleToast(res.errMsg)
						}
						
					},
					fail:()=>{
						return this.$simpleToast('出错了,请重新扫码')
					}
				})

			},

			// 显示结果消息
			showResultMessage(title, content, type) {
				this.resultTitle = title
				this.resultContent = content
				this.resultClass = type === 'success' ? 'result-success' : 'result-error'
				this.showResult = true
			},

			// 格式化时间
			formatTime(date) {
				const year = date.getFullYear()
				const month = (date.getMonth() + 1).toString().padStart(2, '0')
				const day = date.getDate().toString().padStart(2, '0')
				const hour = date.getHours().toString().padStart(2, '0')
				const minute = date.getMinutes().toString().padStart(2, '0')
				return `${year}-${month}-${day} ${hour}:${minute}`
			}
		}
	}
</script>

<style scoped>
	.container {
		display: flex;
		flex-direction: column;
		align-items: center;
		padding: 40rpx;
		min-height: 100vh;
		background-color: #f5f5f5;
	}

	/* 头部样式 */
	.header {
		display: flex;
		flex-direction: column;
		align-items: center;
		margin-bottom: 60rpx;
		text-align: center;
	}

	.logo {
		width: 120rpx;
		height: 120rpx;
		background-color: #07C160;
		border-radius: 24rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-bottom: 30rpx;
	}

	.logo-text {
		color: white;
		font-size: 60rpx;
	}

	.title {
		font-size: 36rpx;
		font-weight: bold;
		color: #333;
		margin-bottom: 16rpx;
	}

	.subtitle {
		font-size: 28rpx;
		color: #666;
	}

	/* 状态卡片 */
	.status-card {
		width: 100%;
		background-color: #f8f9fa;
		border-radius: 16rpx;
		padding: 30rpx;
		margin-bottom: 50rpx;
	}

	.status-title {
		display: flex;
		align-items: center;
		font-size: 32rpx;
		font-weight: 500;
		margin-bottom: 20rpx;
	}

	.status-icon {
		width: 36rpx;
		height: 36rpx;
		border-radius: 50%;
		background-color: #07C160;
		color: white;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-right: 16rpx;
		font-size: 24rpx;
	}

	.status-content {
		font-size: 28rpx;
		color: #666;
		line-height: 1.8;
	}

	/* 签到按钮 */
	.sign-btn {
		width: 100%;
		background-color: #07C160;
		color: white;
		border-radius: 16rpx;
		font-size: 32rpx;
		font-weight: 500;
		margin-bottom: 30rpx;
		height: 96rpx;
		line-height: 96rpx;
	}

	.sign-btn:disabled {
		background-color: #cccccc;
	}

	/* 隐私提示 */
	.privacy-tip {
		font-size: 24rpx;
		color: #999;
		text-align: center;
		margin-bottom: 40rpx;
	}

	/* 结果区域 */
	.result-section {
		width: 100%;
		padding: 30rpx;
		border-radius: 16rpx;
		margin-top: 30rpx;
		display: flex;
		flex-direction: column;
	}

	.result-success {
		background-color: #f0f9ff;
		color: #07C160;
	}

	.result-error {
		background-color: #fef2f2;
		color: #f56565;
	}

	.result-title {
		font-size: 32rpx;
		font-weight: 500;
		margin-bottom: 16rpx;
	}

	.result-content {
		font-size: 28rpx;
	}

	/* 用户信息 */
	.user-info {
		width: 100%;
		background-color: white;
		border-radius: 16rpx;
		padding: 30rpx;
		margin-top: 40rpx;
		box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.05);
	}

	.info-item {
		display: flex;
		justify-content: space-between;
		margin-bottom: 24rpx;
		font-size: 28rpx;
	}

	.info-item:last-child {
		margin-bottom: 0;
	}

	.info-label {
		color: #666;
	}

	.info-value {
		color: #333;
		font-weight: 500;
	}

	.status-success {
		color: #07C160;
	}
</style>